<template>
    <div class="login_container">
      <el-row>
        <el-col :span="12" :xs="0" />
        <el-col :span="12" :xs="24">
          <!-- 登录的表单 -->
          <el-form class="login_form" :model="loginForm" :rules="rules">
            <h1>Hello</h1>
            <h2>欢迎来到运动会后台管理系统</h2>
            <el-form-item prop="userID">
              <el-input v-model="loginForm.userID" :prefix-icon="User" placeholder="请输入学工号"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" placeholder="请输入密码" show-password />
            </el-form-item>
            <el-form-item prop="code">
                    <el-input v-model="loginForm.code" type="text"  placeholder="请输入验证码"/>
                </el-form-item>
                <!-- 验证码图片 -->
                <el-form-item>
                        <el-image style="width: 130px; height: 33px" @click="getVerifiCode" :src="url" />
                    </el-form-item>
            <el-form-item class="flex">
                    <div class="flex">
                      <el-checkbox v-model="check">记住我</el-checkbox>
                      <el-link type="primary" href="/user/login">用户登录-></el-link>
                    </div>
            </el-form-item>
            <el-form-item>
              <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </template>
   
<script setup>
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
const router=useRouter();
import {ref,onMounted} from 'vue'
const loginForm=ref({
  userID:"",
  password:"",
  uuid:'',
  code:''
})
onMounted(
  ()=>{
    getVerifiCode()
  }
)
//导入token状态
import { useTokenStore } from '@/stores/token.js'
import {useAdmInfoStore} from '@/stores/adm.js'
//调用后台接口，完成注册
import {admLoginService,getVerifiCodeService,getInfo} from'@/api/adm/adm.js'
//导入pinia
const admInfoStore = useAdmInfoStore()
//调用useTokenStore得到状态
const tokenStore = useTokenStore();
const check=ref(false)
const login=async()=>{
    loginForm.value.type=check.value
    let result=await admLoginService(loginForm.value);
    // if(result.code==0){
    //     alert('登录成功！')
    // }else alert('登录失败！')
    // alert('登录成功！');
    //保存token
    tokenStore.setToken(result.data)
    ElMessage.success('登录成功！');
    if(check.value){//记住我
    localStorage.setItem('UserloginInfo',JSON.stringify(loginForm.value))
   }else{
    localStorage.setItem('UserloginInfo',JSON.stringify({}))
   }
    result =await getInfo()
    admInfoStore.info=result.data;
    router.push('/admmanage')
}
const url = ref()
const getVerifiCode=()=>{
    loginForm.value.uuid=new Date().getTime()
    url.value = "http://localhost:80/login/getVerify/"+loginForm.value.uuid
}
</script>
  <style scoped lang="scss">
  .login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/bg2.png') no-repeat;
    background-size: cover;
   
    .login_form {
      position: relative;
      width: 80%;
      top: 30vh;
      background: url('@/assets/images/login_form.png') no-repeat;
      background-size: cover;
      padding: 40px;
   
      h1 {
        color: rgb(21, 121, 227);
        font-size: 40px;
      }
   
      h2 {
        font-size: 20px;
        color: rgb(18, 128, 239);
        margin: 20px 0px;
      }
   
      .login_btn {
        width: 100%;
      }

      .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
  }
  </style>